<template>
   <div class="demo4-box">
      <div ref="target" class="content"></div>
   </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch, onUnmounted } from "vue";
import { selectOrderNumListApi } from '@/api/firm/index.js'

// const props = defineProps({
//     data: {
//         type: Object,
//         required: true,
//     },
// });
let target = ref(null);
let myChart = null;
let arrow = 'https://img-s.msn.cn/tenant/amp/entityid/AA1jOOpZ?w=20&h=0&q=90&m=6&f=png&u=t'
onMounted(() => {
   myChart = echarts.init(target.value);
   renderChart();
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
// import arrow from '@/assets/images/arrow.png'
let arrFirm = ref([

])
let chartData = ref([

])
let option = {
   xAxis: {
      splitLine: {
         show: false,
      },
      axisLabel: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitArea: { show: false },
      axisLine: {
         show: false,
      },
   },
   grid: {
      top: '10%',
      bottom: 0,
      left: '5%',
   },
   yAxis: {
      inverse: true,
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: '#fff',
         padding: [-15, 0, 10, 18],
         fontSize: 12,
         // formatter(value, index) {
         //    let str = '', num = 'TOP' + (index + 1)
         //    if (index === 0) {
         //       str = '{a| ' + num + '}{title| ' + value + '}'
         //    } else if (index === 1) {
         //       str = '{b| ' + num + '}{title| ' + value + '}'
         //    } else if (index === 2) {
         //       str = '{c| ' + num + '}{title| ' + value + '}'
         //    } else {
         //       str = '{d| ' + num + '}{title| ' + value + '}'
         //    }
         //    return str
         // },
         rich: {
            a: {
               borderColor: '#EE6F7C',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(238, 111, 124, 0.8)',
               fontSize: 12
            },
            b: {
               borderColor: '#FFCF5F',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(255, 207, 95, 0.7)',
               fontSize: 12
            },
            c: {
               borderColor: '#00E8FF',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(0, 232, 255, 0.7)',
               fontSize: 12
            },
            d: {
               borderColor: '#1A90FF',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(26, 144, 255, 0.7)',
               fontSize: 12
            },
            title: {
               padding: [0, 0, 0, 3],
            },
         },
         align: 'left',
      },
      data: chartData.value.map((item) => item.name),
   },
   series: [
      {
         type: 'pictorialBar',
         symbol: 'rect',
         symbolRotate: 30,
         symbolRepeat: 'fixed',
         symbolClip: true,
         symbolOffset: [0, -1.5],
         symbolSize: [2, 12],
         symbolMargin: '3',
         itemStyle: {
            color: '#000726',
         },
         label: {
            show: true,
            color: '#fff',
            fontFamily: 'Bebas',
            fontSize: 12,
            offset: [-9, -1.5],
            position: 'right',
            formatter(params) {
               let result = ''
               switch (params.dataIndex) {
                  case 0:
                     result = '{img|}{index0|' + params.value + '}{unit|个}'
                     break
                  case 1:
                     result = '{img|}{index1|' + params.value + '}{unit|个}'
                     break
                  case 2:
                     result = '{img|}{index2|' + params.value + '}{unit|个}'
                     break
                  default:
                     result = '{img|}{index3|' + params.value + '}{unit|个}'
                     break
               }
               return result
            },
            rich: {
               img: {
                  height: 18,
                  width: 20,
                  // backgroundColor: { image: arrow },//这个图片自己切，这里上传不了（加了一个尾巴的形状）
               },
               unit: {
                  color: '#fff',
                  fontSize: 11,
               },
               index0: {
                  color: '#ee6f7c',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
               index1: {
                  color: '#ffcf5f',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
               index2: {
                  color: '#00e8ff',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
               index3: {
                  color: '#fff',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
            },
         },
         symbolBoundingData: Math.max(...chartData.value.map((item) => item.value)) * 1.3,
         data: chartData.value.map((item) => item.value),
         z: 2,
      },
      {
         type: 'bar',
         barWidth: 5,
         data: chartData.value.map((item) => item.value),
         itemStyle: {
            color: '#00F7F0',
         },
         z: 1,
      },
      {
         type: 'bar',
         barGap: '-155%', // 设置外框粗细
         data: chartData.value.map((items) => Math.max(...chartData.value.map((item) => item.value)) * 1.3),
         barWidth: 10,
         itemStyle: {
            color: 'none',
            borderColor: 'rgba(64, 245, 245, 0.5)',
         },
         z: 0,
      },
   ],
}
let keyIndex = chartData.value.length
let interval = setInterval(() => {
   keyIndex = keyIndex + 1
   if (keyIndex >= arrFirm.value.length) {
      keyIndex = 0
   }
   chartData.value.shift()
   chartData.value.push(arrFirm.value[keyIndex])
   option = {
      xAxis: {
         splitLine: {
            show: false,
         },
         axisLabel: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitArea: { show: false },
         axisLine: {
            show: false,
         },
      },
      grid: {
         top: '10%',
         bottom: 0,
         left: '5%',
      },
      yAxis: {
         inverse: true,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            color: '#fff',
            padding: [-15, 0, 10, 18],
            fontSize: 12,
            // formatter(value, index) {
            //    let str = '', num = 'TOP' + (index + 1)
            //    if (index === 0) {
            //       str = '{a| ' + num + '}{title| ' + value + '}'
            //    } else if (index === 1) {
            //       str = '{b| ' + num + '}{title| ' + value + '}'
            //    } else if (index === 2) {
            //       str = '{c| ' + num + '}{title| ' + value + '}'
            //    } else {
            //       str = '{d| ' + num + '}{title| ' + value + '}'
            //    }
            //    return str
            // },
            rich: {
               a: {
                  borderColor: '#EE6F7C',
                  borderWidth: 1,
                  borderRadius: [0, 10, 10, 0],
                  padding: [3.5, 10, 1, -13],
                  backgroundColor: 'rgba(238, 111, 124, 0.8)',
                  fontSize: 12
               },
               b: {
                  borderColor: '#FFCF5F',
                  borderWidth: 1,
                  borderRadius: [0, 10, 10, 0],
                  padding: [3.5, 10, 1, -13],
                  backgroundColor: 'rgba(255, 207, 95, 0.7)',
                  fontSize: 12
               },
               c: {
                  borderColor: '#00E8FF',
                  borderWidth: 1,
                  borderRadius: [0, 10, 10, 0],
                  padding: [3.5, 10, 1, -13],
                  backgroundColor: 'rgba(0, 232, 255, 0.7)',
                  fontSize: 12
               },
               d: {
                  borderColor: '#1A90FF',
                  borderWidth: 1,
                  borderRadius: [0, 10, 10, 0],
                  padding: [3.5, 10, 1, -13],
                  backgroundColor: 'rgba(26, 144, 255, 0.7)',
                  fontSize: 12
               },
               title: {
                  padding: [0, 0, 0, 3],
               },
            },
            align: 'left',
         },
         data: chartData.value.map((item) => item.name),
      },
      series: [
         {
            type: 'pictorialBar',
            symbol: 'rect',
            symbolRotate: 30,
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolOffset: [0, -1.5],
            symbolSize: [2, 12],
            symbolMargin: '3',
            itemStyle: {
               color: '#000726',
            },
            label: {
               show: true,
               color: '#fff',
               fontFamily: 'Bebas',
               fontSize: 12,
               offset: [-9, -1.5],
               position: 'right',
               formatter(params) {
                  let result = ''
                  switch (params.dataIndex) {
                     case 0:
                        result = '{img|}{index0|' + params.value + '}{unit|个}'
                        break
                     case 1:
                        result = '{img|}{index1|' + params.value + '}{unit|个}'
                        break
                     case 2:
                        result = '{img|}{index2|' + params.value + '}{unit|个}'
                        break
                     default:
                        result = '{img|}{index3|' + params.value + '}{unit|个}'
                        break
                  }
                  return result
               },
               rich: {
                  img: {
                     height: 18,
                     width: 20,
                     // backgroundColor: { image: arrow },//这个图片自己切，这里上传不了（加了一个尾巴的形状）
                  },
                  unit: {
                     color: '#fff',
                     fontSize: 11,
                  },
                  index0: {
                     color: '#ee6f7c',
                     fontFamily: 'Bebas',
                     padding: [-2, 2, 0, 0],
                  },
                  index1: {
                     color: '#ffcf5f',
                     fontFamily: 'Bebas',
                     padding: [-2, 2, 0, 0],
                  },
                  index2: {
                     color: '#00e8ff',
                     fontFamily: 'Bebas',
                     padding: [-2, 2, 0, 0],
                  },
                  index3: {
                     color: '#fff',
                     fontFamily: 'Bebas',
                     padding: [-2, 2, 0, 0],
                  },
               },
            },
            symbolBoundingData: Math.max(...chartData.value.map((item) => item.value)) * 1.3,
            data: chartData.value.map((item) => item.value),
            z: 2,
         },
         {
            type: 'bar',
            barWidth: 5,
            data: chartData.value.map((item) => item.value),
            itemStyle: {
               color: '#00F7F0',
            },
            z: 1,
         },
         {
            type: 'bar',
            barGap: '-155%', // 设置外框粗细
            data: chartData.value.map((items) => Math.max(...chartData.value.map((item) => item.value)) * 1.3),
            barWidth: 10,
            itemStyle: {
               color: 'none',
               borderColor: 'rgba(64, 245, 245, 0.5)',
            },
            z: 0,
         },
      ],
   }
   renderChart()
}, 3000)
onUnmounted(() => {
   clearInterval(interval)
})
const renderChart = () => {
   myChart.setOption(option);

   // 图表自适应
   window.addEventListener('resize', () => {
      myChart.resize()
   })
};

const selectOrderNumListApiFn = async ()=>{
  let {data,code} = await selectOrderNumListApi()
  if(code === 200){
    chartData.value = data.slice(0,5).map((item) => {
      return {
        name: item.deptName,
        value:item.count
      }
    })
    arrFirm.value = data.map((item) => {
      return {
        name: item.deptName,
        value:item.count
      }
    })
  }
}

onMounted(   () => {
  selectOrderNumListApiFn()
  myChart = echarts.init(target.value);
  renderChart();
});
</script>
<style scoped lang='scss'>
.demo4-box {
   width: 100%;
   height: 100%;
   cursor: pointer;
   overflow: hidden;

   .content {
      width: 100%;
      height: 100%;
   }
}
</style>
